<template>
  <div>
    <el-row :gutter="30">
      <el-col v-bind="grid">
        <div class="Nav">
          <div class="input">
            <el-input v-model="filterText" placeholder="选择分类" prefix-icon="el-icon-search" style="width: 100%;"
              clearable />
          </div>
          <div class="trees-coadd">
            <div class="scollhide">
              <div class="trees" :style="{ maxHeight: (!pictureType ? '345px' : '700px') }">
                <el-tree ref="tree" :data="treeData2" :filter-node-method="filterNode" :props="defaultProps"
                  highlight-current>
                  <div slot-scope="{ node, data}" class="custom-tree-node" @click.stop="handleNodeClick(data)">
                    <div>
                      <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
                      <span v-if="data.space_property_name" style="font-size: 11px;color: #3889b1">（{{ data.name
                      }}）</span>
                    </div>
                    <span class="el-ic">
                      <el-dropdown v-if="data.isAdd || data.isEdit || data.isDelet || node.label == '全部'">
                        <span class="el-dropdown-link">
                          <i class="el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-if="data.isAdd || node.label == '全部'" @click.native="onAdd(data.id)">添加分类
                          </el-dropdown-item>
                          <el-dropdown-item v-if="node.label !== '全部' && data.isEdit" @click.native="onEdit(data.id)">
                            编辑分类</el-dropdown-item>
                          <el-dropdown-item v-if="node.label !== '全部' && data.isDelet"
                            @click.native="handleDelete(data.id)">删除分类</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </span>
                  </div>
                </el-tree>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col v-bind="grid2" class="colLeft">
        <div class="conter mb15">
          <div class="bnt">
            <el-button v-if="!pictureType" size="small" type="primary" class="mr20 mb20" @click="checkPics">使用选中素材
            </el-button>
            <div class="mr20 mb20">
              <el-button-group>
                <el-tooltip class="item" effect="dark" content="上传" placement="top-start">
                  <el-upload class="upload-demo" action :http-request="handleUploadForm" :on-change="imgSaveToUrl"
                    :headers="myHeaders" :show-file-list="false" multiple>
                    <el-button icon="el-icon-upload2" size="mini" style="font-size: 15px;"></el-button>
                  </el-upload>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="添加分类" placement="top-start">
                  <el-button icon="el-icon-circle-plus-outline" style="font-size: 15px;" size="mini"
                    @click="onAdd(10000)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <el-button icon="el-icon-delete" style="font-size: 15px;" size="mini" @click.stop="editPicList('图片')">
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </div>
            <el-select v-model="sleOptions.attachment_category_name" placeholder="移动至" class="mb20" size="small">
              <el-option class="demo" :label="sleOptions.attachment_category_name"
                :value="sleOptions.attachment_category_id"
                style="max-width: 560px;height:200px;overflow: auto;background-color:#fff">
                <el-tree ref="tree2" :data="treeData2" :filter-node-method="filterNode" :props="defaultProps"
                  highlight-current @node-click="handleSelClick" />
              </el-option>
            </el-select>
          </div>
          <div class="pictrueList acea-row" v-loading="loadingPic">
            <div v-show="isShowPic" class="imagesNo">
              <i class="el-icon-picture" style="font-size: 60px;color: rgb(219, 219, 219);" />
              <span class="imagesNo_sp">库为空</span>
            </div>
            <div class="conters scrollbarAll" :style="{ maxHeight: (!pictureType && type == 0 ? '296px' : '700px') }">
              <div v-for="(item, index) in pictrueList.list" :key="index" :class="type == 0 ? 'gridPic' : 'gridVideo'">
                <span class="num_badge" v-if="item.num > 0">{{ item.num }}</span>

                <img v-if="type == 0" v-lazy="item.sattDir ? item.sattDir : localImg" :class="item.isSelect ? 'on' : ''"
                  @click="changImage(item, index, pictrueList.list)" />
                <video v-else controls="controls" :class="item.isSelect ? 'on' : ''"
                  @click="changImage(item, index, pictrueList.list)">
                  <source :src="item.sattDir ? item.sattDir : localImg" />
                </video>
                <!--<img v-if="index === 0" v-lazy="item.localImg?item.localImg:item.sattDir" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" />-->
                <!--<img v-else v-lazy="item.sattDir?item.sattDir:localImg" :class="item.isSelect ? 'on': '' " @click="changImage(item, index, pictrueList.list)" />-->
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <el-pagination :page-sizes="!pictureType ? [10, 20, 30, 40] : [30, 60, 90, 120]" :page-size="tableData.limit"
            :current-page="tableData.page" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
            :total="pictrueList.total" @size-change="handleSizeChange" @current-change="pageChange" />
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="bizTitle" :visible.sync="visible" destroy-on-close :close-on-click-modal="false" :modal="modals"
      @close="closeModel">
      <el-form ref="editPram" :model="editPram" label-width="100px" v-loading="loading">
        <el-form-item label="上级分类" prop="pid"
          :rules="[{ type: 'number', required: true, message: '请选择上级分类', trigger: ['blur', 'change'] }]">
          <el-cascader v-model="editPram.pid" :options="treeData2" :props="categoryProps" style="width:100%" />
        </el-form-item>
        <el-form-item label="分类名称" prop="name" :rules="[{ required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }]">
          <el-input v-model="editPram.name" placeholder="分类名称" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="editPram.sort" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSubmit('editPram')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addCategroy, listCategroy, treeCategroy, infoCategroy, updateCategroy, deleteCategroy } from '@/api/categoryApi'
import { fileImageApi, fileListApi, fileDeleteApi, brandImgDeleteApi, attachmentMoveApi, fileFileApi } from '@/api/systemSetting'
import { getToken } from '@/utils/auth'
export default {
  name: 'Upload',
  props: {
    type: {
      type: Number,
      default: 0
    },
    pictureType: {
      type: String,
      default: ''
    },
    isMore: {
      type: String,
      default: '1'
    },
    modelName: {
      type: String,
      default: ''
    },
    checkedMore: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loadingPic: false,
      loading: false,
      modals: false,
      allTreeList: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },
      editPram: {
        pid: 1000,
        name: '',
        type: this.type == 0 ? 2 : 10,
        sort: 1,
        status: 0,
        url: 'url',
        id: 0
      },
      visible: false,
      bizTitle: '',
      sleOptions: {
        attrId: '',
        pid: ''
      },
      list: [],
      grid: {
        xl: 7,
        lg: 7,
        md: 7,
        sm: 7,
        xs: 24
      },
      grid2: {
        xl: 17,
        lg: 17,
        md: 17,
        sm: 17,
        xs: 24
      },
      filterText: '',
      treeData: [],
      treeData2: [],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      tableData: {
        page: 1,
        limit: 10,
        pid: this.type == 0 ? 0 : -1
      },
      classifyId: 0,
      myHeaders: { 'X-Token': getToken() },
      treeFrom: {
        status: -1,
        type: this.type == 0 ? 2 : 10
      },
      pictrueList: {
        list: [],
        total: 0
      },
      isShowPic: false,
      checkPicList: [],
      ids: [],
      listPram: {
        pid: 0,
        type: this.type == 0 ? 2 : 10,
        status: 0,
        name: '',
        page: 1,
        limit: 9999
      },
      localImg: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    //console.log(this.type)
    this.pictureType ? this.tableData.limit = 30 : this.tableData.limit = 10
    if (this.$route && this.$route.query.field === 'dialog') import('../../../public/UEditor/dialogs/internal.js')
    this.getList()
    this.getFileList()
    // this.handlerGetList()
  },
  methods: {
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(event) {  // 也可以用file
      this.localFile = event.raw  // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader()
      reader.readAsDataURL(this.localFile);// 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        // console.integralLog(reader.result)
      }

      /* 另外一种本地预览方法 */
      let URL = window.URL || window.webkitURL;
      this.localImg = URL.createObjectURL(event.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },
    closeModel() {
      this.$refs['editPram'].resetFields();
    },
    handlerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editPram.pid == 10000) this.editPram.pid = 0
          this.bizTitle === '添加分类' ? addCategroy(this.editPram).then(data => {
            this.$message.success('创建成功')
            this.visible = false
            this.getList()
          }) : updateCategroy(this.editPram).then(data => {
            this.$message.success('编辑成功')
            this.visible = false
            this.getList()
          })
        } else {
          return false;
        }
      })
    },
    // 表单分类
    handlerGetList() {
      let datas = {
        name: '全部',
        id: ''
      }
      treeCategroy(this.treeFrom).then(data => {
        this.allTreeList = data
        this.allTreeLis.unshift(datas)
      })
    },
    // 搜索分类
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 所有分类
    getList() {
      const data = {
        name: '全部',
        id: this.type == 0 ? 0 : -1
      }
      treeCategroy(this.treeFrom).then(res => {
        this.treeData = res
        this.treeData.unshift(data)
        this.treeData2 = [...this.treeData]
      })
    },
    // 添加分类
    onAdd(id) {
      this.tableData.pid = id
      if (this.tableData.pid === 10000) this.tableData.pid = 0
      this.bizTitle = '添加分类'
      this.visible = true
      if (id) this.editPram = {
        pid: id,
        name: '',
        type: this.type == 0 ? 2 : 10,
        sort: 1,
        status: 0,
        url: 'url',
        id: 0
      }
    },
    // 编辑
    onEdit(id) {
      if (id === 10000) id = 0
      this.bizTitle = '编辑分类'
      this.loading = true
      infoCategroy({ id: id }).then((res) => {
        this.editPram = res
        this.loading = false
      })
      this.visible = true
    },
    // 删除
    handleDelete(id) {
      if (id === 10000) id = 0
      this.$modalSure().then(() => {
        deleteCategroy({ id: id }).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    handleNodeClick(data) {
      this.tableData.pid = data.id
      this.getFileList()
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData()
      const data = {
        model: this.modelName ? this.modelName : this.$route.path.split("/")[1],
        pid: this.tableData.pid
      }
      formData.append('multipart', param.file)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.type == 0) {
        fileImageApi(formData, data).then(res => {
          loading.close()
          this.$message.success('上传成功');
          this.tableData.page = 1;
          this.getFileList()
        }).catch(res => {
          loading.close()
        })
      } else if (this.type == 1) {
        fileFileApi(formData, data).then(res => {
          loading.close()
          this.$message.success('上传成功');
          this.tableData.page = 1;
          this.getFileList()
        }).catch(res => {
          loading.close()
        })
      }

    },
    // 文件列表
    getFileList() {
      if (this.tableData.pid === 10000) this.tableData.pid = 0
      this.loadingPic = true;
      fileListApi(this.tableData).then(async res => {
        this.pictrueList.list = res.list
        this.getSelect()
        if (this.tableData.page === 1 && this.pictrueList.list.length > 0) this.pictrueList.list[0].localImg = this.localImg
        if (this.pictrueList.list.length) {
          this.isShowPic = false
        } else {
          this.isShowPic = true
        }
        this.pictrueList.total = res.total
        this.loadingPic = false;
      }).catch(() => {
        this.loadingPic = false;
      })

    },
    pageChange(page) {
      this.tableData.page = page
      this.getFileList()
    },
    handleSizeChange(val) {
      this.tableData.limit = val
      this.getFileList()
    },
    // 选中图片
    changImage(item, index, row) {
      let activeIndex = 0;
      if (!item.isSelect) {
        this.$set(item, 'isSelect', true);
        this.checkPicList.push(item);
      } else {
        this.$set(item, 'isSelect', !item.isSelect);
        this.checkPicList.map((el, index) => {
          if (el.attId == item.attId) {
            activeIndex = index;
          }
        });
        this.checkPicList.splice(activeIndex, 1);
      }
      this.ids = [];
      this.checkPicList.map((item, i) => {
        this.ids.push(item.attId);
      });

      this.pictrueList.list.map((el, i) => {
        if (el.isSelect) {
          this.checkPicList.filter((el2, j) => {
            if (el.attId == el2.attId) {
              el.num = j + 1;
              this.$nextTick(() => {
                this.pictrueList.list
              })
            }
          });
        } else {
          el.num = 0;
        }
        // console.log(this.pictrueList.list);
      });
    },
    //刷新数据后找回已经选择的数据
    getSelect() {
      //console.log('ids', this.ids)
      var j = 0;
      if (this.ids.length) {
        this.pictrueList.list.forEach(e => {
          if (this.ids.indexOf(e.attId) !== -1) {
            this.$set(e, 'isSelect', true);
            e.num = this.ids.indexOf(e.attId) + 1;
            //e.isSelect = true;
            this.$nextTick(() => {
              this.pictrueList.list
            })
          }
        })
      }
    },
    // 点击使用选中图片
    checkPics() {
      if (!this.checkPicList.length) return this.$message.warning('请先选择')
      if (this.$route && this.$route.query.field === 'dialog') {
        let str = '';
        for (let i = 0; i < this.checkPicList.length; i++) {

          str += '<img src="' + this.checkPicList[i].sattDir + '">'
        }
        /* eslint-disable */
        nowEditor.dialog.close(true);
        nowEditor.editor.setContent(str, true)
      } else {
        if (this.isMore === '1' && this.checkPicList.length > 1) { return this.$message.warning('最多只能选一个') }

        this.$emit('getImage', [...this.checkedMore, ...this.checkPicList])
      }
      this.checkPicList = []
      this.ids = []
    },
    // 删除图片
    editPicList(tit) {
      if (!this.checkPicList.length) return this.$message.warning('请先选择')
      this.$modalSure().then(() => {
        if (this.type == 0) {
          brandImgDeleteApi(this.ids.join(',')).then(() => {
            this.$message.success('刪除成功')
            this.checkPicList = []
            this.ids = [];
            this.getFileList()
          }).catch(res => {
            loading.close()
          })
        } else if (this.type == 1) {
          fileDeleteApi(this.ids.join(',')).then(() => {
            this.$message.success('刪除成功')
            this.checkPicList = []
            this.ids = [];
            this.getFileList()
          }).catch(res => {
            loading.close()
          })
        }
      })
    },
    // 移动分类点击
    handleSelClick(node) {
      if (this.ids.length) {
        this.sleOptions = {
          attrId: this.ids.join(','),
          pid: node.id
        }
        this.getMove()
      } else {
        this.$message.warning('请先选择')
      }
    },
    getMove() {
      attachmentMoveApi(this.sleOptions).then(async res => {
        this.$message.success('操作成功')
        this.clearBoth()
        this.checkPicList = []
        this.ids = [];
        this.getFileList()
      }).catch(res => {
        this.clearBoth()
      })
    },
    clearBoth() {
      this.sleOptions = {
        attrId: '',
        pid: ''
      }
      this.checkPicList = []
      this.ids = []
    }

  }
}
</script>

<style scoped lang="scss">
.demo::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.demo {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

.temp {
  height: 0;
  margin-bottom: 0;
  border: none;
  padding: 0;
}

.selectTreeClass {
  background: #d5e8fc;
}

.treeBox {
  width: 100%;
  height: 100%;
}

.upload-demo {
  display: inline-block !important;
  float: left;
}

.tree_w {
  padding: 20px 30px
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-right: 8px;
  color: #4386c6;
}

.custom-tree-node-label {
  display: block;
  width: 125px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-ic {
  display: none;

  i,
  span {
    /*padding: 0 14px;*/
    font-size: 18px;
    font-weight: 600;
  }

  .svg-icon {
    color: #4386c6;
  }
}

.el-tree-node__content {
  height: 38px;
}

.el-tree-node__expand-icon {
  color: #428bca;
  /*padding: 10px 10px 0px 10px !important;*/
}

.el-tree-node__content:hover .el-ic {
  color: #428bca !important;
  display: inline-block;
}

.el-tree-node__content:hover {
  font-weight: bold;
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content :hover {
  .el-tree-node__expand-icon.is-leaf {
    color: transparent;
    cursor: default;
  }

  /*background-color: #3998d9;*/
  .custom-tree-node {
    font-weight: bold;
  }

  .el-tree-node__expand-icon {
    font-weight: bold;
  }
}

.el-dialog__body {
  .upload-container .image-preview .image-preview-wrapper img {
    height: 100px;
  }

  .el-dialog .el-collapse-item__wrap {
    padding-top: 0px;

  }

  .spatial_img {
    .el-collapse-item__wrap {
      margin-bottom: 0;
      padding-top: 0px;
    }
  }

  .upload-container .image-preview .image-preview-wrapper {
    width: 120px;
  }

  .upload-container .image-preview .image-preview-action {
    line-height: 100px;
    height: 100px;
  }
}

.trees-coadd {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;

  .scollhide {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px 0 10px 0;
    box-sizing: border-box;

    .trees {
      width: 100%;
    }
  }

  .scollhide::-webkit-scrollbar {
    display: none;
  }
}

.conters {
  display: flex;
  flex-wrap: wrap;
  /*max-height: 296px;*/
  overflow: auto;
}

.conters:after {
  content: "";
  width: 410px !important;
}

.gridVideo {
  margin-right: 15px;
  margin-bottom: 10px;
  width: 250px;
  height: 150px;
  position: relative;
  cursor: pointer;

  video {
    width: 100%;
    height: 100%;
    display: block;
  }

  .num_badge {
    z-index: 1000;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #F56C6C;
    font-size: 14px;
    text-align: center;
    color: #fff;
    line-height: 20px;
  }
}

.gridPic {
  margin-right: 15px;
  margin-bottom: 10px;
  width: 110px;
  height: 110px;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .num_badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #F56C6C;
    font-size: 14px;
    text-align: center;
    color: #fff;
    line-height: 20px;
  }
}

.conter {
  width: 99%;
  height: 100%;

  .bnt {
    width: 100%;
    padding: 0 13px 10px 7px;
    box-sizing: border-box;
    display: flex;
  }

  .pictrueList {
    /*padding-left: 15px;*/
    width: 100%;

    el-image {
      width: 100%;
      border: 2px solid #fff;
    }

    .on {
      border: 2px solid #5FB878;
    }
  }

  .el-image {
    width: 110px;
    height: 110px;
    cursor: pointer;
  }

  .imagesNo {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 65px 0;

    .imagesNo_sp {
      font-size: 13px;
      color: #dbdbdb;
      line-height: 3;
    }
  }
}
</style>
